<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <div id="app">
        <!-- 
        组件身上v-model相当于： 
        :modelValue="searchText" 将searchText传递给子组件
        @update:modelValue="searchText=$event" 
        -->
        <custom-input v-model="searchText"></custom-input>
        {{searchText}}
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    searchText: "令妹"
                }
            }
        })

        app.component('custom-input', {

            // 声明用于接收v-model初始值的props 名字必须为modelValue
            props: ['modelValue'],

            // 声明用于向父组件发送v-model最新值的自定义事件 名字必须为update:modelValue
            emits: ['update:modelValue'],

            // input框的初始value为modelValue这个props接收到的v-model的初始值
            // 用户输入时产生input事件 用户的实时输入内容为$event.target.value
            // 子组件通过向父组件发送自定义事件update:modelValue 事件数据携带用户的实时输入
            template: `
                <h3>{{modelValue}}</h3>
                <button @click="$emit('update:modelValue', Date.now())">更新v-model</button>
                <hr/>

                <input
                :value="modelValue"
                @input="$emit('update:modelValue', $event.target.value)"
                >
            `
        })

        const vm = app.mount('#app')
    </script>
</body>

</html>